<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent>
      <el-form-item label="商家账号名">
        <el-input v-model="listQuery.q_name" maxlength="50" size="small" class="filter-item" />
      </el-form-item>
      <el-form-item label="商家名称">
        <el-input v-model="listQuery.q_sellerName" maxlength="50" size="small" class="filter-item" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="listQuery.q_auditStatus" size="small" placeholder="请选择">
          <el-option v-for="item in auditStatus" :label="item.name" :key="item.value" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" @click="check">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="toEdit" v-permission="['admin/sale/salescale/update']">设置
      </el-button>
      <el-button size="small" type="primary" @click="freeze" v-permission="['admin/sale/salescale/freeze']">停用
      </el-button>
      <el-button size="small" type="primary" @click="unfreeze" v-permission="['admin/sale/salescale/unfreeze']">启用
      </el-button>
    </div>
    <el-table ref="singleTable" :data="dataList" border fit highlight-current-row v-loading="listLoading"
      style="width: 100%" @current-change="handleCurrentChange">
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column property="name" width="150" label="商家账号名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="memberName" width="200" label="商家账号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="sellerName" width="150" label="商家名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column property="productNumber" label="商品数量">
      </el-table-column>
      <el-table-column property="saleMoney" width="150" label="店铺总销售金额">
      </el-table-column>
      <el-table-column label="商家状态">
        <template slot-scope="scope">
          {{ codeBox.SELLER_AUDIT_STATE[scope.row.auditStatus] }}
        </template>
      </el-table-column>
      <el-table-column property="saleScale1" width="150" label="一级分销比例">
      </el-table-column>
      <el-table-column property="saleScale2" width="150" label="二级分销比例">
      </el-table-column>
      <el-table-column property="updateUserName" label="修改人">
      </el-table-column>
      <el-table-column property="updateTime" width="200" label="修改时间">
      </el-table-column>
      <el-table-column label="分销状态">
        <template slot-scope="scope">
          {{ codeBox.USE_YN[scope.row.state] }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
    <el-dialog :title="judgmentTitle" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="commissionForm" :rules="rules" ref="commissionForm">
        <el-form-item label="店铺名称" prop="sellerName" :label-width="formLabelWidth">
          <el-input v-model="commissionForm.sellerName" autocomplete="off" readonly style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="一级分销" prop="saleScale1" :label-width="formLabelWidth">
          <el-input-number v-model="commissionForm.saleScale1" :min="0" :controls="false" :precision="2" max="1"
            style="width: 300px;"></el-input-number>
          <span class="form-word-hint">最大值为1</span>
        </el-form-item>
        <el-form-item label="二级分销" prop="saleScale2" :label-width="formLabelWidth">
          <el-input-number v-model="commissionForm.saleScale2" :min="0" :controls="false" :precision="2" max="1"
            style="width: 300px;"></el-input-number>
          <span class="form-word-hint">最大值为1</span>
        </el-form-item>
        <el-form-item label="是否启用" prop="state" :label-width="formLabelWidth">
          <el-radio-group v-model="commissionForm.state">
            <el-radio v-for="item in statesList" :key="item.value" :label="item.value">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('commissionForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    fetchSalescaleList,
    freezeSellerSale,
    unfreezeSellerSale,
    toEditSalescale,
    updateSellerSale
  } from '@/api/sale'
  import {
    getCodeManager,
    codeToArray
  } from '@/api/all'
  import Pagination from '@/components/Pagination'
  import {
    Message
  } from 'element-ui'
  export default {
    name: 'salescalelist',
    components: {
      Pagination
    },
    data() {
      return {
        dataList: [],
        auditStatus: [],
        statesList: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          q_name: '',
          q_sellerName: '',
          q_auditStatus: ''
        },
        currentRow: null,
        judgmentTitle: '修改三级分销',
        judgmentType: '1',
        dialogFormVisible: false,
        formLabelWidth: '80px',
        commissionForm: {
          sellerName: '',
          saleScale1: '',
          saleScale2: '',
          state: ''
        },
        rules: {
          saleScale1: [{
            required: true,
            message: '请输入一级分销',
            trigger: 'blur'
          }, ],
          saleScale2: [{
            required: true,
            message: '请输入二级分销',
            trigger: 'blur'
          }, ],
          state: [{
            required: true,
            message: '请选择是否启用',
            trigger: 'change'
          }, ]
        }
      }
    },
    created() {
      getCodeManager('SELLER_AUDIT_STATE', () => {
        this.auditStatus = codeToArray('SELLER_AUDIT_STATE');
      })
      getCodeManager('USE_YN', () => {
        this.statesList = codeToArray('USE_YN');
      })
      this.getList()
    },
    methods: {
      handleCurrentChange(val) {
        // 选中当前行数据
        this.currentRow = val
      },
      // 获取列表数据
      getList() {
        this.listLoading = true
        fetchSalescaleList(this.listQuery).then(response => {
          this.dataList = response.data.rows
          this.total = response.data.total
          this.listLoading = false
          console.log(this.dataList)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      check() {
        this.getList()
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 20,
          q_name: '',
          q_sellerName: '',
          q_auditStatus: ''
        }
        this.getList()
      },
      toEdit() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        this.judgmentType = '2'
        this.dialogFormVisible = true;
        toEditSalescale({
          id: this.currentRow.id
        }).then(res => {
          this.commissionForm.sellerName = res.data.data.seller.sellerName
          this.commissionForm.saleScale1 = res.data.data.seller.saleScale1
          this.commissionForm.saleScale2 = res.data.data.seller.saleScale2
          this.commissionForm.state = res.data.data.seller.state + ''
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.commissionForm.id = this.currentRow.id
            updateSellerSale(this.commissionForm).then(res => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success('操作成功')
              this.dialogFormVisible = false;
              this.getList()
            })
          }
        });
      },
      freeze() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.state == 0) {
          Message.error('已经停用，请勿重复操作。')
          return;
        }
        this.$confirm('确定停用吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          freezeSellerSale({
            sellerId: this.currentRow.id
          }).then(response => {
            if (!response.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.getList()
          })
        })
      },
      unfreeze() {
        if (!this.currentRow) {
          Message.error('请选择操作行。')
          return;
        };
        if (this.currentRow.state == 1) {
          Message.error('已经启用，请勿重复操作。')
          return;
        }
        this.$confirm('确定启用吗？', '提示', {
          onfirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          unfreezeSellerSale({
            sellerId: this.currentRow.id
          }).then(response => {
            if (!response.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success('操作成功')
            this.getList()
          })
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container .el-col-6 {
    margin-bottom: 15px;
  }

  .filter-item {
    margin-bottom: 0
  }

  /deep/ .filter-container label {
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
  }
</style>
